<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>【每日一练】15—CSS实现好看的卡片效果</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Ubuntu", sans-serif;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #3c2846;
    }
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .card {
      position: relative;
      width: 320px;
      height: 450px;
      margin: 30px;
      background: #287bff;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      overflow: hidden;
      border-bottom-left-radius: 160px;
      border-bottom-right-radius: 160px;
      box-shadow: 0 15px 0 #fff, inset 0 -15px 0 rgba(255, 255, 255, 0.25),
        0 45px 0 rgba(0, 0, 0, 0.15);
    }
    .card::before {
      content: "";
      position: absolute;
      top: -150px;
      left: -40%;
      filter: blur(5px);
      width: 100%;
      height: 150%;
      transform: rotate(35deg);
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
      pointer-events: none;
    }
    .card:nth-child(1) {
      background: linear-gradient(to bottom, #ff2ae0, #64b5f6);
    }
    .card:nth-child(2) {
      background: linear-gradient(to bottom, #ffec61, #f321d7);
    }
    .card:nth-child(3) {
      background: linear-gradient(to bottom, #24ff72, #9a4eff);
    }
    .card .icon {
      position: relative;
      width: 140px;
      height: 120px;
      background: #3c2846;
      border-bottom-left-radius: 100px;
      border-bottom-right-radius: 100px;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1), inset 0 -8px 0 #fff;
      z-index: 1000;
    }
    .card .icon ion-icon {
      color: #fff;
      position: relative;
      font-size: 6em;
      z-index: 1;
      --ionicon-stroke-width: 24px;
    }
    .card .icon::before {
      content: "";
      position: absolute;
      top: 0;
      left: -50px;
      width: 50px;
      height: 50px;
      background: transparent;
      border-top-right-radius: 50px;
      box-shadow: 15px -15px 0 15px #3c2846;
    }
    .card .icon::after {
      content: "";
      position: absolute;
      top: 0;
      right: -50px;
      width: 50px;
      height: 50px;
      background: transparent;
      border-top-left-radius: 50px;
      box-shadow: -15px -15px 0 15px #3c2846;
    }
    .content {
      position: absolute;
      width: 100%;
      padding: 30px;
      padding-top: 140px;
      text-align: center;
    }
    .content h2 {
      font-size: 1.75em;
      color: #fff;
      margin-bottom: 10px;
    }
    .content p {
      color: #fff;
      line-height: 1.5em;
    }
  </style>
  <body>
    <div id="container" style="border: solid 1px red">
      <span
        style="
          background: blue;
          color: #fff;
          font-size: 20px;
          line-height: 60px;
        "
        >center glyphs vertically in an inline box.</span
      >
    </div>
    <div class="container">
      <div class="card">
        <div class="icon">
          <ion-icon name="diamond-outline"></ion-icon>
        </div>
        <div class="content">
          <h2>什么是Tailwind CSS</h2>
          <p>
            就是一个 CSS 框架，和你知道的 bootstrap，element
            ui，Antd，bulma。一样。将一些 css
            样式封装好，用来加速我们开发的一个工具。
          </p>
        </div>
      </div>
      <div class="card">
        <div class="icon">
          <ion-icon name="earth-outline"></ion-icon>
        </div>
        <div class="content">
          <h2>什么是Tailwind CSS</h2>
          <p>
            就是一个 CSS 框架，和你知道的 bootstrap，element
            ui，Antd，bulma。一样。将一些 css
            样式封装好，用来加速我们开发的一个工具。
          </p>
        </div>
      </div>
      <div class="card">
        <div class="icon">
          <ion-icon name="rocket-outline"></ion-icon>
        </div>
        <div class="content">
          <h2>什么是Tailwind CSS</h2>
          <p>
            就是一个 CSS 框架，和你知道的 bootstrap，element
            ui，Antd，bulma。一样。将一些 css
            样式封装好，用来加速我们开发的一个工具。
          </p>
        </div>
      </div>
    </div>
    <!-- <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script> -->
  </body>
</html>
